@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700;900&family=Work+Sans&display=swap');

@keyframes bg-slideshow-gd-l {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-6826px);
    }
}

@keyframes bg-slideshow-gd {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-4985px);
    }
}

@keyframes bg-slideshow-gd-m {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-3200px);
    }
}

@keyframes bg-slideshow-gd-s {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-1778px);
    }
}

@keyframes bg-slideshow-boomlings-l {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-5461px);
    }
}

@keyframes bg-slideshow-boomlings {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-3988px);
    }
}

@keyframes bg-slideshow-boomlings-m {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-2560px);
    }
}

@keyframes bg-slideshow-boomlings-s {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-1422px);
    }
}

@keyframes button-zoom-click {
    0%{
        transform: translateX(-50%) scale(1);
    }
    75%{
        transform: translateX(-50%) scale(1.2);
    }
    100%{
        transform: translateX(-50%) scale(1.1);
    }
}

@font-face {
    font-family: "Pusab";
    font-weight: 300;
    src: url("../fonts/pusab/Pusab.ttf") format("truetype"),
        url("../fonts/pusab/Pusab.svg") format("svg"),
        url("../fonts/pusab/Pusab.woff") format("woff"),
        url("../fonts/pusab/Pusab.woff2") format("woff2");
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*::selection{
    background-color: #ff8f00b0;
}

*::-moz-selection{
    background-color: #ff8f00b0;
}

img{
    user-select: none;
}

html, body{
    overflow-x: hidden;
}

html{
    scroll-behavior: smooth;
}

body{
    margin: 0;
    background-color: #0050ca;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    color: aliceblue;
}

h1, h2, h3, h4, h5, h6{
    font-family: "Work Sans", Helvetica, Arial, sans-serif;
    font-size: 200%;
}

button{
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
}

img.inline{
    height: 1em;
    width: auto;
    display: inline;
    transform: translateY(15%);
}

img[src*=".svg"]{
    filter: invert(0.9);
}

nav a, footer a{
    color: rgba(245, 248, 252, 0.85);
    text-decoration: none;
}

article{
    background-color: #002a70;
    color: aliceblue;
}

/*Video Player*/

.video-player{
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    z-index: 2;
    display: none;
}

.video-player.active{
    display: block;
}

.video-player iframe{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 50%;
    max-width: 1024px;
    max-height: 640px;
    border: none;
}

.video-player button{
    position: absolute;
    right: 32px;
    top: 16px;
}

.video-player button img{
    height: 2.5rem;
}

/*Separator*/

div.separator{
    position: relative;
    height: 31vw;
    margin: -10.3vw 0;
    z-index: 1;
    pointer-events: none;
}

div.separator img{
    width: 100%;
    height: 31vw;
}

/*Menu*/

#open_menu{
    transform: translateY(-8%);
}

header .menu{
    background-image: linear-gradient(#0065fd, #002e74);
    width: 16rem;
    height: 100vh;
    top: 0;
    position: fixed;
    z-index: 2;
    transition: 0.5s ease-in-out;
}

header .menu.shown{
    right: 0;
}

header .menu.hidden{
    right: -16rem;
}

.menu li{
    height: 64px;
}

.menu a img{
    width: 100%;
    height: 64px;
}

.menu ul{
    flex-direction: column;
    width: 100%;
    list-style: none;
}

.menu ul .close{
    text-align: right;
}

/*Header*/

header{
    background-image: url("../images/backgrounds/bg.jpg");
    background-size: 40%;
    font-size: 170%;
}

header img{
    height: 1.25em;
    transform: translateY(12%);
}

header img[src*=".svg"]{
    height: 1.5em;
    cursor: pointer;
}

nav{
    width: 90%;
}

nav a:hover{
    color: rgba(245, 248, 252, 0.95);
}

.navbar-slim{
    display: none;
}

nav ul{
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0.75rem 0;
    width: 100%;
}

nav ul a:not(.logo){
    font-size: 70%;
    font-weight: bold;
}

nav li{
    color: rgba(245, 247, 253, 0.85);
    font-family: "Work Sans", Arial, sans-serif;
    margin-left: 1rem;
    text-decoration: none;
}

/*About Me*/

article.about-me-wrapper{
    text-align: center;
    background-color: black;
}

div.about-me{
    display: inline-block;
    position: relative;
    width: 100%;
    min-width: 1024px;
    max-height: 1024px;
    max-width: 1920px;
    margin-bottom: -4px;
}

div.about-me img{
    width: 100%;
    filter: brightness(0.5);
}

div.about-me img.s, div.about-me img.xs{
    display: none;
}

div.about-me p{
    position: absolute;
    text-align: right;
}

div.about-me p.title{
    left: 5%;
    top: 23%;
    font-size: 450%;
    font-weight: 900;
    text-align: left;
}

div.about-me p.description{
    right: 3%;
    bottom: 22%;
    font-size: 275%;
    font-weight: 700;
    width: 50%;
}

/*Game Preview*/

.gamepreview{
    background-color: #000000;
    position: relative;
}

.gamepreview > a, .gamepreview > img, .gamepreview .links, .gamepreview .notice, .gamepreview > button{
    position: absolute;
    z-index: 1;
}

.gamepreview > img:first-child{ /*Game Icon / Title*/
    height: 7rem;
    left: 50%;
    top: 14%;
    transform: translateX(-50%);
}

.gamepreview button.play-trailer{
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
    height: 200px;
}

.gamepreview button.play-trailer img{
    height: 100%;
}

.gamepreview button.play-trailer:active{
    animation: button-zoom-click 0.2s;
    animation-fill-mode: forwards;
}

.gamepreview .bgs{
    text-align: center;
    display: flex;
}

.gamepreview .bgs.gd{
    animation: bg-slideshow-gd-l 30s infinite linear;
}

.gamepreview .bgs.boomlings{
    animation: bg-slideshow-boomlings-l 30s infinite linear;
}

.gamepreview iframe, .gamepreview video, .gamepreview .bgs img{
    width: auto;
    height: 768px;
    filter: brightness(0.5);
    z-index: 0;
    pointer-events: none;
}

.gamepreview a > img{
    height: 4rem;
}

.gamepreview .links{
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    justify-content: center;
}

.gamepreview .links.boomlings{
    top: 75%;
}

.gamepreview .links a{
    margin: 0 1rem;
}

.gamepreview .notice{
    width: 90%;
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
}

/*Game Teaser*/

.game-teaser{
    position: relative;
    height: 400px;
    overflow: hidden;
    background-color: black;
    text-align: center;
}

.game-teaser > img{
    filter: brightness(0.6);
    transform: translateY(-25%);
}

.game-teaser p{
    position: absolute;
    font-weight: 900;
    text-align: left;
}

.game-teaser p.title{
    top: 10px;
    left: 10px;
    font-size: 300%;
}

.game-teaser p.subtitle{
    top: 175px;
    left: 48px;
    font-size: 175%;
    font-weight: 700;
}

/*Game Description*/

.game-description{
    background-image: linear-gradient(#0065fd, #002e74);
}

.game-description p, .game-description ul, .game-description h4{
    margin: 1rem 0;
    padding: 0 2rem;
}

.game-description h4{
    margin-top: 2rem;
    margin-bottom: 0;
}

.game-description ul{
    margin: 2rem 0;
    line-height: 1.4rem;
}

.game-description .quot{
    padding: 0 3rem;
    margin: 0.5rem 0;
    max-width: 800px;
}

.game-description .quot q{
    font-weight: bold;
    font-size: 120%;
}

/*Features*/

.game-description .features{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 4rem 0;
}

.game-description .features li{
    display: flex;
    align-items: center;
    width: 50%;
    padding: 0.5rem;
    font-size: 120%;

    animation-timing-function: cubic-bezier(0.21, 1.9, 0.79, 0.77);
}

.game-description .features img{
    filter: drop-shadow(0.2rem  0.2rem 0 rgba(0, 0, 0, 0.5));
    height: 2.25em;
    margin-right: 0.5rem;
}

.game-description .features img.character{
    align-self: center;
    height: 12rem;
}

.game-description img.character.shopkeeper{
    transform: translateY(5px);
}

.game-description .notice{
    display: none;
}

/*Review*/

.review::before{
    content: "\"";
    font-family: "Pusab", serif;
    margin-top: -1.75rem;
    font-size: 500%;
}

.review{
    display: flex;
    margin: 2rem 2.5rem;
    padding: 0.5rem;
    border: 3px solid black;
    background-color: #a25927;
    border-radius: 6px;
    max-width: 800px;

    animation-timing-function: cubic-bezier(0.21, 1.9, 0.79, 0.77);
}

.review .quotation{
    font-size: 400%;
    transform: translateY(1rem);
    padding-right: 1rem;
    font-family: "Pusab", serif;
}

.review .description{
    font-weight: bold;
}

.review .author{
    font-size: 90%;
    padding-top: 0.5rem;
}

.review > span{
    display: flex;
    flex-direction: column;
}

.review > div{
    display: flex;
    flex-direction: column;
}

.review .stars{
    align-self: flex-end;
}

.game-reviews{
    display: flex;
}

.game-reviews img{
    align-self: flex-end;
    max-height: 150px;
}

/*Game Preview Collection (e. g. for spinoffs)*/

.gamepreview-collection{
    font-family: "Pusab", sans-serif;
    letter-spacing: 0.05em;
    text-shadow: 0.15em 0.15em black, -0.15em 0.15em black, 0.15em -0.15em black, -0.15em -0.15em black, 0.4em 0.4em rgba(0, 0, 0, 0.3);

    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    background-color: rgba(0, 0, 0, 0.25);
    padding-left: 5vw;
    padding-bottom: 1rem;
}

.gamepreview-collection > div{
    font-size: 190%;
    padding: 1em;
}

.gamepreview-collection div.name{
    display: flex;
    align-items: center;
    justify-content: left;
    min-height: 4rem;
}

.gamepreview-collection div.links{
    display: flex;
    margin-top: 1rem;
}

.gamepreview-collection div.links a{
    margin-right: 0.75rem;
}

.gamepreview-collection div img{
    height: 1.5em;
}

.gamepreview-collection div img.game{
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    border: 2px solid aliceblue;
    margin-right: 0.75rem;
}

/*Footer*/

footer{
    padding: 0.6em;
    background-color: #00183b;
    font-family: "Work Sans", Helvetica, Arial, sans-serif;
}

/*Resources (Columns)*/

footer .resources{
    display: flex;
    width: 100%;
    justify-content: center;
}

footer .resources div{
    margin: 0 2rem;
}

footer .resources div h4{
    font-size: 1.2rem;
    color: aliceblue;
    margin-bottom: 0.5rem;
}

footer .resources ul{
    list-style: none;
}

footer .resources ul li{
    padding: 0.5rem 0;
}

footer .resources ul.social li{
    display: inline;
}

footer a img{
    height: 2em;
}

@media (orientation: portrait){
    .gamepreview-collection{
        grid-template-columns: 100%;
    }
}

@media(max-width: 1600px){
    .gamepreview button.play-trailer{
        height: 160px;
    }

    .gamepreview video, .gamepreview .bgs img{
        height: 560px;
    }

    .gamepreview a > img{
        height: 4rem;
    }

    .gamepreview .bgs.gd{
        animation-name: bg-slideshow-gd;
    }

    .gamepreview .bgs.boomlings{
        animation-name: bg-slideshow-boomlings;
    }
}

@media(max-width: 1280px){
    .game-description .features li{
        font-size: 100%;
    }

    div.about-me p {
        text-align: left;
    }

    div.about-me p.description{
        left: 5%;
    }
}

@media (max-width: 960px) {
    .gamepreview > img:first-child {
        height: 20%;
    }

    .gamepreview button.play-trailer{
        height: 128px;
    }

    .gamepreview video, .gamepreview .bgs img{
        height: 360px;
    }

    .gamepreview a > img{
        height: 3rem;
    }

    .gamepreview .notice{
        font-size: 70%;
    }

    .gamepreview .bgs.gd{
        animation-name: bg-slideshow-gd-m;
    }

    .gamepreview .bgs.boomlings{
        animation-name: bg-slideshow-boomlings-m;
    }

    .game-description .game-teaser{
        font-size: 70%;
    }
}

@media (max-width: 768px) {
    .navbar-standard{
        display: none;
    }

    .navbar-slim{
        display: flex;
    }

    div.about-me{
        min-width: 768px;
    }

    div.about-me img.x{
        display: none;
    }

    div.about-me img.s{
        display: block;
    }

    div.about-me p.title {
        top: 150px;
        font-size: 330%;
    }

    div.about-me p.description {
        top: 350px;
        font-size: 200%;
    }
}

@media (max-width: 560px) {
    .gamepreview video, .gamepreview .bgs img{
        height: 200px;
    }

    .gamepreview a > img{
        height: 1.7rem;
    }

    .gamepreview .links a {
        margin: 0 0.5rem;
    }

    .gamepreview .notice{
        display: none;
    }

    .gamepreview .links.boomlings{
        top: 80%;
    }

    .gamepreview button.play-trailer{
        top: 35%;
        height: 80px;
    }

    .gamepreview .bgs.gd{
        animation-name: bg-slideshow-gd-s;
    }

    .gamepreview .bgs.boomlings{
        animation-name: bg-slideshow-boomlings-s;
    }

    .game-description  .game-teaser{
        font-size: 50%;
    }

    .game-description  .game-teaser img{
        height: 600px;
    }

    .game-teaser > img{
        transform: translateX(-100px);
    }

    .game-teaser p.subtitle{
        top: 100px;
    }

    .game-description .character{
        display: none;
    }

    .game-description .notice{
        display: block;
    }

    .gamepreview-collection div{
        font-size: 120%;
    }

    .gamepreview-collection div img.game{
        border-width: 1px;
    }

    .game-description .features li{
        width: 100%;
    }

    footer .resources div{
        margin: 0 0.5rem;
    }
}

@media (max-width: 500px) {
    header{
        background-size: 50%;
    }

    div.about-me{
        min-width: 320px;
    }

    div.about-me img.s{
        display: none;
    }

    div.about-me img.xs{
        display: block;
    }

    div.about-me p.title {
        top: 15%;
        font-size: 200%;
    }

    div.about-me p.description {
        top: 35%;
        font-size: 150%;
    }

    .game-teaser p.subtitle{
        top: 120px;
    }

    footer .resources{
        flex-wrap: wrap;
        justify-content: left;
    }

    footer .resources div{
        width: 100%;
        margin: 1rem 0;
    }
}

@media (max-width: 400px) {
    .game-description .game-teaser{
        font-size: 40%;
    }

    .game-teaser p.subtitle, .game-teaser p.title{
        left: 0;
    }
}